<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>个人中心 - 消防工程集团</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: #f5f5f5;
            padding-bottom: 80px;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #e5e5e5;
            z-index: 100;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-4 py-6">
        <div class="flex items-center">
            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop" 
                 alt="头像" class="w-16 h-16 rounded-full border-2 border-white mr-4">
            <div class="flex-1">
                <div class="text-xl font-bold mb-1">张工</div>
                <div class="text-blue-100 text-sm mb-2">项目经理 · 消防工程A项目</div>
                <div class="text-xs text-blue-200">工号：E001234 | 手机：138****5678</div>
            </div>
            <a href="#" class="text-white">
                <i class="fas fa-edit text-xl"></i>
            </a>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4">
        <div class="grid grid-cols-4 gap-4 text-center">
            <div>
                <div class="text-2xl font-bold text-blue-600">22</div>
                <div class="text-xs text-gray-500 mt-1">本月出勤</div>
            </div>
            <div>
                <div class="text-2xl font-bold text-green-600">5</div>
                <div class="text-xs text-gray-500 mt-1">待审批</div>
            </div>
            <div>
                <div class="text-2xl font-bold text-orange-600">12</div>
                <div class="text-xs text-gray-500 mt-1">我发起的</div>
            </div>
            <div>
                <div class="text-2xl font-bold text-purple-600">3</div>
                <div class="text-xs text-gray-500 mt-1">我的项目</div>
            </div>
        </div>
    </div>

    <!-- Menu List -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm overflow-hidden">
        <!-- Personal Info -->
        <a href="#" class="flex items-center justify-between p-4 border-b border-gray-100">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-user text-blue-600"></i>
                </div>
                <span class="text-gray-800 font-medium">个人信息</span>
            </div>
            <i class="fas fa-chevron-right text-gray-300"></i>
        </a>

        <!-- Attendance Stats -->
        <a href="attendance-stats.html" class="flex items-center justify-between p-4 border-b border-gray-100">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-chart-line text-green-600"></i>
                </div>
                <span class="text-gray-800 font-medium">考勤统计</span>
            </div>
            <i class="fas fa-chevron-right text-gray-300"></i>
        </a>

        <!-- Salary -->
        <a href="salary.html" class="flex items-center justify-between p-4 border-b border-gray-100">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-money-bill-wave text-yellow-600"></i>
                </div>
                <span class="text-gray-800 font-medium">工资条查询</span>
            </div>
            <i class="fas fa-chevron-right text-gray-300"></i>
        </a>

        <!-- My Projects -->
        <a href="#" class="flex items-center justify-between p-4 border-b border-gray-100">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-building text-purple-600"></i>
                </div>
                <span class="text-gray-800 font-medium">我的项目</span>
            </div>
            <i class="fas fa-chevron-right text-gray-300"></i>
        </a>
    </div>

    <!-- Settings -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm overflow-hidden">
        <a href="#" class="flex items-center justify-between p-4 border-b border-gray-100">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-bell text-gray-600"></i>
                </div>
                <span class="text-gray-800 font-medium">消息通知</span>
            </div>
            <div class="flex items-center">
                <span class="text-xs text-gray-400 mr-2">已开启</span>
                <i class="fas fa-chevron-right text-gray-300"></i>
            </div>
        </a>

        <a href="#" class="flex items-center justify-between p-4 border-b border-gray-100">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-key text-gray-600"></i>
                </div>
                <span class="text-gray-800 font-medium">修改密码</span>
            </div>
            <i class="fas fa-chevron-right text-gray-300"></i>
        </a>

        <a href="#" class="flex items-center justify-between p-4 border-b border-gray-100">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-question-circle text-gray-600"></i>
                </div>
                <span class="text-gray-800 font-medium">帮助中心</span>
            </div>
            <i class="fas fa-chevron-right text-gray-300"></i>
        </a>

        <a href="#" class="flex items-center justify-between p-4">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-info-circle text-gray-600"></i>
                </div>
                <span class="text-gray-800 font-medium">关于我们</span>
            </div>
            <div class="flex items-center">
                <span class="text-xs text-gray-400 mr-2">v1.0.0</span>
                <i class="fas fa-chevron-right text-gray-300"></i>
            </div>
        </a>
    </div>

    <!-- Logout -->
    <div class="px-4 mt-6 mb-6">
        <button class="w-full bg-white text-red-600 py-4 rounded-xl font-semibold shadow-sm border border-red-200">
            <i class="fas fa-sign-out-alt mr-2"></i>
            退出登录
        </button>
    </div>

    <!-- Bottom Navigation -->
    <div class="bottom-nav">
        <div class="flex justify-around py-2">
            <a href="home.html" class="flex flex-col items-center py-2 px-4 text-gray-400">
                <i class="fas fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="approval.html" class="flex flex-col items-center py-2 px-4 text-gray-400">
                <i class="fas fa-clipboard-check text-xl mb-1"></i>
                <span class="text-xs">审批</span>
            </a>
            <a href="attendance-stats.html" class="flex flex-col items-center py-2 px-4 text-gray-400">
                <i class="fas fa-chart-bar text-xl mb-1"></i>
                <span class="text-xs">统计</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center py-2 px-4 text-blue-600">
                <i class="fas fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </a>
        </div>
    </div>
</body>
</html>

